<template>
  <div>
    <more-header title="修改密码"></more-header>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="phone"
            label="手机号"
            placeholder="请输入手机号"
            left-icon="phone-o"
          >
            <van-icon v-show="phone" @click="phone = ''" slot="button" name="close" />
          </van-field>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <van-button slot="button" :disabled="disabled" @click="getCode" size="small" type="primary">{{this.btntxt}}</van-button>
          </van-field>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="password"
            type="password"
            label="新密码"
            placeholder="请输入密码"
          />
        </van-cell-group>
      </van-col>
    </van-row>
    <van-button class="login-btn" @click="confirm" round size="large">确认修改</van-button>
  </div>
</template>

<script>
  import MoreHeader from '_c/more-header'
  export default {
    name: 'reset-password',
    components: {
      MoreHeader
    },
    data() {
      return {
        phone: '',
        sms: '',
        password: '',
        disabled: false,
        btntxt: '获取验证码',
        time: 0
      }
    },
    methods: {
      getCode() {
        if (!this.phone) {
          this.$toast('手机号不能为空')
        }
        if (!this.$objectUtil.checkPhone(this.phone)) {
          this.$toast('手机号格式错误')
        }
        this.$post('/api/api/student/modifyPasswordCode', this.$qs.stringify({mobile: this.phone})).then((res) => {
          console.log(res)
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$toast(res.data.errorMessage)
              return false
            }
            this.time = 60
            this.disabled = true
            this.timer()
            this.$toast.success('发送成功')
          } else {
            this.$toast.fail('发送失败')
          }
        })
      },
      confirm() {
        if (!this.password) {
          this.$toast('手机号不能为空')
        }
        if (!this.$objectUtil.checkPassword(this.password)) {
          this.$toast('密码由八位字符组成（字母加数字）')
        }
        this.$post('/api/api/student/modifyPassword', this.$qs.stringify({
          newPassword: this.password,
          code: this.sms
        })).then((res) => {
          if (res.code === 0) {
            if (res.data.code === 20004) {
              this.$toast(res.data.errorMessage)
              return false
            }
            this.$dialog.alert({
              title: '密码修改成功',
              confirmButtonText: '重新登陆'
            }).then(() => {
              this.$router.push('/login')
            })
          } else {
            this.$toast.fail('修改失败')
          }
        })
      },
      timer() {
        if (this.time > 0) {
          this.time--
          this.btntxt = this.time + 's后获取'
          setTimeout(this.timer, 1000)
        } else {
          this.time = 0
          this.btntxt = '获取验证码'
          this.disabled = false
        }
      }
    }
  }
</script>

<style scoped>
  .login-btn{
    width: 84%;
    background: #07c160;
    color: #fff;
    margin: 40px 8%;
  }
</style>
